<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Address Bar Example</title>
</head>

<body>
    <h1 id="content">Initial Content</h1>
    <button router="/ui">Change URL To UI</button>
    <button router="/banner">Change URL To Banner</button>
    <button router="/bio">Change URL To Bio</button>
    <script>
        let map = new Map();
        map.set('/ui', 'the uiest... iopiopiop')
        map.set('/banner', 'bannner test get...')
        map.set('/bio', 'the bio test')


        const btns = document.querySelectorAll('button')
        for (let i = 0; i < btns.length; i++) {
            btns[i].addEventListener('click', (e) => {
                let newPath = e.srcElement.attributes.router.nodeValue;
                window.addEventListener('hashchange', function (e) {
                    document.getElementById('content').textContent = map.get(newPath)
                });
                window.location.hash = newPath;
            })
        }
    </script>
</body>

</html>